<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    app
  </div>

  <script src="../react-js/react.development.js" crossorigin></script>
  <script src="../react-js/react-dom.development.js" crossorigin></script>
  <script src="../react-js/babel.min.js"></script>
  
  <script type="text/babel">
    // 封装App组件
    class App extends React.Component {

      constructor() {
        super(); //因为是继承类 要先调用super() 才能使用this
        // this.message = "Hello World"
        this.state = {
          message: 'Hello World'
        }

        {/*1.2 假如有多个按钮触发点击 就在类生成时会调用constructor 绑定this*/}
        this.btnClick = this.btnClick.bind(this)
      }
      
      render() {
        return (
          <div>
            <h2>{ this.state.message }</h2>
            {/* 
              当前btnClick这个函数并不是我们在调用 而是react内部它发现当前我们这个按钮发生了点击 对这个函数做了一个回调（btnClick.call(undefined)）也就是说它在执行我们这个函数是给我绑定了一个this 这个this就是undefined（this = undefined）
            
              1.1 所以我们要用这个函数 需要给它绑定一个this  （this = 创建出来的当前react对象）
            */}
            {/* <button onClick={ this.btnClick.bind(this) }>改变文本</button> */}

            <button onClick={ this.btnClick }>改变文本</button>
            
            {/* 2. 使用箭头函数 中永远不绑定this 只会往上层作用域中找 */}
            <button onClick={ this.increment }>按钮</button>

            {/* 3. 传入一个箭头函数 在箭头函数体中调用方法 方便传入参数 */}
            <button onClick={ () => { this.decrement("yzh") } }>--anniu</button>
          </div>
        )
      }

      btnClick() {
        console.log(this);
        // this.message = 'Hello React' // 内部不会调用render()导致数据更改页面没有刷新

        this.setState({
          message: 'Hello React!!'
        })
      }

      // class fields  给属性赋值 这里把箭头函数赋值给increment
      increment = () => {
        console.log(this.state.message, this);
      }

      decrement(name) {
        console.log(this.state.message, '-------', name);
      }

    }

    ReactDOM.render(<App/>, document.getElementById('app'))
  </script>
</body>
</html>